import React, { useState } from 'react';
import { Layout, Menu ,Button,Dropdown, Space,Drawer,Switch} from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { homeroutes } from '../../router/Index';
import type { MenuProps } from 'antd';
import { Breadcrumb,theme } from 'antd';
import { NavLink } from 'react-router-dom';
import ThemeSwitcher from '../../components/SearchInput'
import Tabs from '../../components/Tabs';
const { Header, Content, Footer, Sider } = Layout;
const Index = () => {

  const navigate = useNavigate();
  const location = useLocation();
  const [open, setOpen] = useState(false);
  const [showlogo,setShowlogo] = useState(true);
    type MenuItem = Required<MenuProps>['items'][number];
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    const yuo = (arr: any) => {
        let temp = []
        arr.forEach((item, index) => {
            if (item.children) {
                temp.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path,
                    item.icon, yuo(item.children)
                ))
            } else {
                temp.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path,
                    item.icon
                ))
            }
        })
        return temp
    }
    const items = yuo(homeroutes)
    const [collapsed, setCollapsed] = useState(false);
      const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
//定义打开页面设置的函数
const opensetting = ()=>{
  setOpen(true);
}
const onClose = ()=>{
  setOpen(false);
}
const onChangelogo = ()=>{
    setShowlogo(!showlogo);
}
//dropdown的选项;
const dropitems = [
  {
    label:(<Button type="primary" onClick={opensetting}>页面设置</Button>),
    key:'0'
  }
]
    return (
    //     <div>
    //         <Layout style={{ minHeight: '100vh' }}>
    //             <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
    //                 <div className="demo-logo-vertical" />
    //                 <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
    //             </Sider>
    //             <Layout>
                

    //   <Header style={{ background: '#fff', padding: '0 20px',display:'flex',justifyContent:'space-between',alignItems:'center' }}>
    //     <h1>{showlogo?<span>管理系统</span>:' '}
    //       {/* <Button onClick={changetheme}>切换主题</Button> */}
    //       {/* <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
    //     {collapsed ? '展开' : '收起'}
    //   </Button> */}
    //     </h1>
    //      <Dropdown menu={{ items: dropitems }}>
    //        <img src="https://picsum.photos/200/300?random=1" alt="avatar" style={{ width: 40, height: 40, borderRadius: 20 }} />
    //      </Dropdown>
        
    //   </Header>
    //                 <Content style={{ margin: '0 16px' }}>
    //                     <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
    //                     <div
    //                         style={{
    //                             padding: 24,
    //                             minHeight: 360,
    //                             background: colorBgContainer,
    //                             borderRadius: borderRadiusLG,
    //                         }}
    //                     >
    //                         <Outlet></Outlet>
    //                     </div>
    //                 </Content>
    //                 <Footer style={{ textAlign: 'center' }}>
    //                     Ant Design ©{new Date().getFullYear()} Created by Ant UED
    //                 </Footer>
    //             </Layout>
    //         </Layout>
    //     </div>
    <Layout style={{ minHeight: '100vh' }}>
      <Drawer
        title="Basic Drawer"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
       
        <p>是否显示logo</p>
        <Switch defaultChecked onChange={onChangelogo} />
      </Drawer>
      <Header style={{ background: '#fff', padding: '0 20px',display:'flex',justifyContent:'space-between',alignItems:'center' }}>
        <h1>{showlogo?<span>管理系统</span>:' '}
          {/* <Button onClick={changetheme}>切换主题</Button> */}
          <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>
        {collapsed ? '展开' : '收起'}
      </Button>
        </h1>
         <Dropdown menu={{ items: dropitems }}>
           <img src="https://picsum.photos/200/300?random=2" alt="avatar" style={{ width: 40, height: 40, borderRadius: 20 }} />
         </Dropdown>
        
      </Header>
      <Layout>
        <Sider width={collapsed?64:200} style={{ background: '#fff' }}>
           <Menu    mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderInlineEnd: 0 }} items={items} />
        </Sider>
        <Layout style={{ padding: '24px' }}>
          {/* <Tabs /> */}
          <Content
            style={{
              background:'var(--bg-primary)',
              color:'var(--text-primary)',
              borderColor:'var(--border-color)',
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
    )
}

export default Index
